import { Row, Col,Collapse } from 'antd';
import React from 'react'
import cardStyles from '../../index.less';
import styles from './index.less'

const {Panel} = Collapse

function CarInfo(props:any) {
  const { info } = props;
  const customizeHeader = (value: string) => (
    <div>
      <div className={styles.tip} />
      {value}
    </div>
  )
  return (
    <div className={cardStyles.card} id="carInfo">
        <Collapse
          defaultActiveKey={['1', '2']}
          ghost
          expandIconPosition="end">
            <Panel header={customizeHeader('绑车信息')} key="1">
              <Row gutter={24} className={cardStyles.rows}>
                <Col span={12} className={cardStyles.col}>
                  <div className={cardStyles.label}>车架号：</div>
                  <div className={cardStyles.value}>{info?.vinNo || ''}</div>
                </Col>
                <Col span={12} className={cardStyles.col}>
                  <div className={cardStyles.label}>车牌号：</div>
                  <div className={cardStyles.value}>{info?.plateNo || ''}</div>
                </Col>
              </Row>
              <Row gutter={24} className={cardStyles.rows}>
                <Col span={12} className={cardStyles.col}>
                  <div className={cardStyles.label}>品牌/车系/车型：</div>
                  <div className={cardStyles.value}>{info?.plan?.applicableGoods}</div>
                </Col>
                <Col span={12} className={cardStyles.col}>
                  <div className={cardStyles.label}>车辆所在仓库：</div>
                  <div className={cardStyles.value}>{info?.depotName || ''}</div>
                </Col>
              </Row>
              <Row gutter={24} className={cardStyles.rows}>
                <Col span={12} className={cardStyles.col}>
                  <div className={cardStyles.label}>车辆已购保险：</div>
                  <div className={cardStyles.value}>{info?.insuranceNames || ''}</div>
                </Col>
                <Col span={12} className={cardStyles.col}>
                  <div className={cardStyles.label}>备注：</div>
                  <div className={cardStyles.value}>{info?.tiedRemark || ''}</div>
                </Col>
              </Row>
            </Panel>
        </Collapse>
     
    </div>
  );
}

export default CarInfo;
